import classNames from "classnames";
import "./index.scss";

// 引入触发actios方法的函数
import { changeMenu } from "../../store/modules/takeaway";
import { useSelector, useDispatch } from "react-redux";

const Menu = () => {
  const dispatch = useDispatch();

  const { foodsList, menuInd } = useSelector((state) => state.food);

  const menus = foodsList.map((item) => ({ tag: item.tag, name: item.name }));
  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {
        return (
          <div
            key={item.tag}
            // 条件判断值  加上特定类名active
            className={classNames(
              "list-menu-item",
              index === menuInd && "active"
            )}
            // 触发dispatch函数
            onClick={() => dispatch(changeMenu(index))}
          >
            {item.name}
          </div>
        );
      })}
    </nav>
  );
};

export default Menu;
